<template>
	<view v-if="visible" class="popup-overlay" @click="closePopup">
		<!--#ifdef MP-->
		<view class="popup-container" @click.stop>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="popup-container" @click.stop style="top: 80rpx;">
		<!-- #endif -->
			<view class="popup-body">
				<swiper class="swiper" circular  current="{{currentItem}}" @change="handleSwiperChange">
					<swiper-item v-for="(item, index) in slides" :key="index">
						<view class="popup-bg" :style="{ backgroundImage: `url(${item.image})` }">
						<view class="msy-bg">
						</view>
							<image class="title-bg" src="https://oss.jtmckj.com/drifbottle/title-bg.png"></image>
							<view class="zt-continar">
								<view class="zt-flex-box">
									<view class="zt-name" v-if="item.roomName">{{ item.roomName }}桌</view>
									<view class="zt-name" v-else>没桌</view>
									<view class="yq-jr" v-if="item.roomName">邀请加入</view>
									<view class="yq-jr" v-else>求拼</view>
								</view> 
								<view class="time">{{dayjs(item.askForTime).format('YYYY-MM-DD HH:mm:ss')}}</view>
							</view>
				
							<view class="logo-continar">
								<view class="logo-flex-bewtten">
									<view class="logo-flex-left">
										<!-- 微信用户头像 -->
										<image class="por-img" v-if="item.logo" :src="item.logo" mode=""></image>
										<view style="flex: 1; margin-left: 12rpx;">
											<view class="title">{{ item.memberName }}</view>
											<view style="display: flex;">
											<view class="age">
												<image v-if="item.sex == '男'" src="https://oss.jtmckj.com/drifbottle/age-icon.png" mode=""></image>
												<image v-if="item.sex == '女'" src="https://oss.jtmckj.com/drifbottle/age-icon-n.png" mode=""></image>
												<view class="value">{{ item.age }}</view>
											</view>
											</view>
										</view>
									</view>
				
									<view class="logo-flex-rg">
										<image src="https://oss.jtmckj.com/drifbottle/xx1.png" mode=""></image>
									</view>
								</view>
								<view class="pro-info .text-container">{{ item.msg }}</view>
							</view>
				
							<view class="footer-continar">
								<view class="left-continar" @click="debouncedReject(item,index)">
									<image src="https://oss.jtmckj.com/drifbottle/icon-mxq.png" mode=""></image>
									<view class="title" >拒绝</view>
								</view>
								<view class="rg-continar" @click="debouncedCancel(item,index)">
									<view class="ax-continar">
										<image src="https://oss.jtmckj.com/drifbottle/ax-icon.png" mode=""></image>
										<view class="text">
											接受 
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="page-indicator" v-if="slides.length > 1">
					<text style="color: #FFAA00;">{{currentIndex + 1}}</text>/{{slides.length}} 左右滑动
				</view>
			</view>
			
			<image src="https://oss.jtmckj.com/drifbottle/icon-close1.png" class="popup-close" @click="closePopup"></image>
		</view>


	</view>
</template>

<script setup>
	import {ref,defineEmits,defineProps} from 'vue';
    import dayjs from 'dayjs';
	
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		},
		slides:{
			type: Array,
			default: () => []
		}
	});

	const emit = defineEmits(['update:visible', 'confirm', 'cancel']);

	const closePopup = () => {
		emit('update:visible', false);
	};

	const handleOverlayClick = () => {
		closePopup();
	};
     
	 // 定义数据和方法
	   const item = ref(null); // 你的数据
	   const index = ref(0); // 你的索引
	 	
	 // 自定义防抖函数
	 	const debounce = (func, wait) => {
	 	  let timeout;
	 	  return function (...args) {
	 		const context = this;
	 		clearTimeout(timeout);
	 		timeout = setTimeout(() => func.apply(context, args), wait);
	 	  };
	 	};
	 
	const confirm = (item,index) => {
			emit('confirm',item);
			closePopup();
	};

	const cancel = (item,index) => {
			emit('cancel',item);
		    closePopup();
	};
	
	const debouncedCancel = debounce(cancel, 300); // 300 毫秒防抖
	const debouncedReject = debounce(confirm, 300); // 300 毫秒防抖
	
	const currentIndex = ref(0);

	function handleSwiperChange(e) {
		currentIndex.value = e.detail.current;
	}
</script>

<style scoped lang="scss">
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		// background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
	}

	.popup-container {
		position: relative;
		top: 170rpx;
		// margin-top: 180rpx;
		background: #fff;
		width: 95%;
		max-width: 600px;
		max-height: 80%;
		height: 930rpx;
		display: flex;
		flex-direction: column;
		background: linear-gradient(0deg, #E9A5A5 0%, #B8C1C0 25%, #65C0E0 50%, #AEA2DB 75%, #81C1D9 100%);
		border-radius: 30rpx;
		border-image: linear-gradient(0deg, #E9A5A5, #B8C1C0, #65C0E0, #AEA2DB, #81C1D9) 10 10;
	}

	.popup-header {
		padding: 10px;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
	}



	.popup-body {
		padding: 10rpx;
		flex: 1;

		.swiper {
			height: 100%;
		}
	}

	.popup-bg {
		border-radius: 10px;
		position: relative;
		height: 100%;
		background-size: 100% 100%;
  .msy-bg {
		   border-radius: 10px;
		   position: absolute;
		    top: 0;
		     left: 0;
		     right: 0;
		     bottom: 0;
			  background-image: url('https://oss.jtmckj.com/drifbottle/msy-bg.png');
			   background-size: cover; /* Cover the entire area */
			   background-position: center; /* Center the background image */
			     /* Optional: Add overlay color */
			     background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
			     pointer-events: none; /* Allow clicks to pass through the overlay */
	   }
		.title-bg {
			margin-left: 16rpx;
			margin-top: 289rpx;
			width: 244rpx;
			height: 79rpx;
		}

		.zt-continar {
			position: relative;
			padding: 14rpx 0 14rpx 24rpx;
			margin-top: 24rpx;
			width: 360rpx;
			/* height: 100rpx; */
			background: #000000;
			border-radius: 0rpx 16rpx 16rpx 0rpx;
			background-color: rgba(0, 0, 0, 0.5);

			.zt-flex-box {
				display: flex;
				align-items: center;

				.zt-name {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFD400;
					margin-right: 16rpx;
				}

				.yq-jr {
					font-weight: 500;
					font-size: 28rpx;
					color: #FF6A00;
				}
			}

			.time {
				margin-top: 8rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}

	.popup-footer {
		padding: 10px;
		border-top: 1px solid #ddd;
		display: flex;
		justify-content: flex-end;
	}

	.popup-button {
		margin-left: 10px;
		padding: 5px 10px;
	}

	.popup-close {
		position: absolute;
		display: flex;
		justify-content: center;
		// transform: translateY(50rpx);
		// bottom: -190rpx;
		top: 40rpx ;
		right: 40rpx;
		width: 60rpx;
		height: 60rpx;
	}

	.logo-continar {
		position: absolute;
		margin-top: 32rpx;
		padding-left: 20rpx;

		.logo-flex-bewtten {
			display: flex;
			justify-content: space-between;

			.logo-flex-left {
				display: flex;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.age {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 10rpx;
				    padding: 0 15rpx;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 16rpx;
					border: 1px solid #FFFFFF;

					image {
						width: 22rpx;
						height: 22rpx;
					}

					.value {
						margin-left: 7rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}

			.logo-flex-rg {
				padding-right: 30rpx;

				image {
					    position: relative;
					    left: 160rpx;
					width: 105rpx;
					height: 71rpx;
				}

			}
		}
	}

	.pro-info {
		margin-top: 30rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.footer-continar {
		position: absolute;
		width: 100%;
		bottom: 0;
		display: flex;
		margin-top: 17rpx;
        border-radius: 10rpx;
		background: #212121;

		.left-continar {
			padding-left: 16rpx;
			width: 270rpx;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 65rpx;
			}

			.title {
				margin-left: 50rpx;
				font-weight: bold;
				font-size: 32rpx; 
				color: #F24479;
			}
		}

		.rg-continar {
			text-align: center;
			position: absolute;
			right: -1rpx;
			width: 340rpx;
			height: 101rpx;
			line-height: 100rpx;
			background: url("https://oss.jtmckj.com/drifbottle/icon-btn.png")no-repeat;
			background-size: 100% 100%;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			border-radius: 0px 0 10rpx 0; 
			.ax-continar {
				padding-left: 120rpx;
				display: flex;
				align-items: center;
			
				image {
					width: 40rpx;
					height: 34rpx;
					margin-right: 20rpx;
			
					.text {
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}
				}
		}
	}

	.page-indicator {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
		width: 180rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.text-container {
	  display: -webkit-box;
	  -webkit-line-clamp: 2; /* 显示的最大行数 */
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	.ax-continar-news {
		padding-left: 80rpx !important;
	}
</style>